<!--  -->
<template>
    <div>
      <mt-header fixed title="购物车(复选框有问题)">
      <router-link  to  slot="left">
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

  <van-checkbox-group class="derver" v-model="result" ref="checkboxGroup"  v-if="this.data.length!==0">
    <div v-for="item in data" :key="item.pid">
    <van-swipe-cell>
      <div class="border">
        <van-checkbox  :name="item.pid" @click.stop="check()" class="checkbox"></van-checkbox>
        <div class="img">
          <img :src="require(`../assets/img/product/${item.ProductImg}`)" alt="">
        </div>
          <div class="content">
            <div>
              <span>{{item.ProductTitle}} </span>
              <span class="do">x{{item.ProductSum}}</span>
            </div>
            <div class="butt"> 
              <span>￥{{item.ProductPrice}}</span>
              <van-stepper v-model="item.ProductSum" button-size="23px" class="but"  min="1" max="8" @minus="ProductMinus(item.pid,item.ProductSum)" @plus="ProductPlus(item.pid,item.ProductSum)" disable-input/>
            </div>
          </div>
      </div>
    <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
  </van-swipe-cell>
</div>
</van-checkbox-group>
<div class="NoData" v-else>
  <img src="../assets/img/empty-car.png" alt="">
  <p class="No1">购物车空空如也</p>
  <p class="No2" @click="Go()">前往选购</p>
      </div>
      <div class="submit" v-if="this.data.length!==0">
        <van-checkbox v-model="checked" class="all">全选</van-checkbox>
        <span>合计:
          <sapn class="totle">
            {{ this.totle }}
        </sapn>
      </span>
        <van-button round type="info" @click="settle()" class="settlement">结算</van-button>
      </div>
      <Tabbar :selected="selected"></Tabbar>
    </div>
    </template>
    
    <script>
    import { Toast } from 'vant';
    import {getDateNums} from "../assets/util.js";
    import Tabbar from "../components/TabbarName.vue";
    export default {
    data() {
    return {
          selected:"ShoppingCart",
          result: [],
          checked:false,
          data:"",
          totle:0,
          uid:"",
          outTradeNo:"",//随机订单号
          Time:"",//日期时间
          shopitem:""
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
     // 判断登录状态
  let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
        this.GetProduct(userInfo.uid)
        this.uid=userInfo.uid
    },
    watch:{
      checked(){
        console.log(this.checked)
        if(this.checked){
          this.$refs.checkboxGroup.toggleAll(true);
          this.check()
        }else{
          this.$refs.checkboxGroup.toggleAll();
          this.check()
        }
      },
      result(){
        console.log(this.result)
      }
    },
    methods:{
      GetProduct(uid){
        var url= `/GetUserCart?uid=${uid}`
          // console.log(url)
          this.axios.get(url).then(res=>{
            console.log(res)
            this.data=res.data.result
            // 每次先将totle清零
            this.totle=0

            this.result=[]

            for(var i=0;i<this.data.length;i++){
              if(this.data[i].IsCheck==0){
                this.result.push(this.data[i].pid)
                this.totle=this.totle+this.data[i].ProductPrice*this.data[i].ProductSum
              }
            }
          if(this.data.length==this.result.length && this.data.length!==0){
              this.$refs.checkboxGroup.toggleAll(true);
              this.checked=true
            console.log("全选")
          }else{
            this.checked=false
          }


          })
      },
      ProductPlus(pid,sum){
        console.log("商品id",pid)
        console.log("商品数量",sum+1)
        var url= `/SetUserCart?pid=${pid}&sum=${sum+1}`
          // console.log(url)
          this.axios.get(url)
          this.loading()
          this.GetProduct(this.uid)
      },
      ProductMinus(pid,sum){
        console.log("商品id",pid)
        console.log("商品数量",sum-1)
        var url= `/SetUserCart?pid=${pid}&sum=${sum-1}`
          // console.log(url)
          this.axios.get(url)
          this.loading()
          this.GetProduct(this.uid)
      },
      check(){
        console.log("选中组合",this.result)
          var url= `/SetUserCartIs?result=${this.result}`
          // console.log(url)
          this.axios.get(url).then(res=>{
            console.log(res)
            this.loading()
            this.GetProduct(this.uid)  
          })
      },
      loading(){
        Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      },
      getshop(a){
          // console.log(this.result)
        var url= `/GetProductshopitem?check=${[this.result]}&number=${a}`
          // console.log(url)
          this.axios.get(url).then(res=>{
            console.log(res.data.result)
            this.shopitem=res.data.result
            console.log(this.shopitem)
          })
      },
      settle(){
        this.order_nums() //随机一个订单号
        this.getCurrentTime() //获取当前时间
        console.log(this.outTradeNo)
        var url= `/AddOrder?totle=${this.totle}&time=${this.Time}&Number=${this.outTradeNo}&userid=${this.uid}`
          this.axios.get(url).then(res=>{
            // console.log(url)

        this.getshop(this.outTradeNo) //获取商品数据
        this.GetProduct(this.uid)
            var oid=res.data.result.insertId
        this.$router.push({
            path:`/GenerateOrder/${oid}`
          })
          
          })
      },
      //第一种简单的 生成随机订单号，时间+日期，格式为:20200313123456，这种数据量大的时候有可能会重复
      order_nums() {
        var that = this;
        var outTradeNo = ""; //订单号
        for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
          {
            outTradeNo += Math.floor(Math.random() * 10);
          }
                          
          outTradeNo ="LM"+ String(getDateNums(new Date())) + String(outTradeNo) 
          that.outTradeNo = outTradeNo;
          this.outTradeNo=outTradeNo
        },
        getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        if(mm<10){
          mm="0"+mm
        }
        if(dd<10){
          mm="0"+mm
        }
        _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
        console.log(_this.gettime)  
        this.Time=_this.gettime
    },
    Go(){
      this.$router.push("/")
    }
        
    },
    components: {
    Tabbar
  }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
    .mint-header{
        color: black;
        background-color: white;
        font-size: 10px;
    }
    
    .img img{
      width: 100%;
    }
    
    .tableLine {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 0.2px;
        background-color: rgb(27, 174, 174);
        text-align: center;
        font-size: 20px;
        color: rgb(27, 174, 174);
        margin: 20px 0;
      }
     .midText {
        position: absolute;
        left: 50%;
        background-color: #ffffff;
        padding: 0 15px;
        color: rgb(27, 174, 174);
        transform: translateX(-50%) translateY(-50%);
      }
    
      .derver{
        margin-top: 60px;
        margin-bottom: 100px;
      }
      .border{
        display: flex ;
        /* margin-left: 10%; */
      }
      .border .img{
        width: 30%;
      }
      .border .content{
        font-size: 10px;
        /* margin-left: 10px; */
        margin-top:20px;
      }
      .border .content :first-child :first-child{
        /* color: blue;  */
        width: 160px;
        word-break:normal;
        display:inline-block;
        overflow:hidden;
      }
      .border .content .do{
        margin-left: 10px;
        /* color: aqua; */
        float: right; 
      }


      .border .content .butt{
        margin-top: 10px;
      }
      .border .content .butt span{
        /* margin-left: 15px; */
        /* color: aqua; */
        /* float: right; */
        color: red;
        font-size: 15px;
      }
      .border .content .butt .but{
        margin-left: 13px;
        /* color: aqua; */
        float: right;
        color: red;
        font-size: 15px;
      }
    

      .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }

  .checkbox{
    margin-left: 12px;
  }

  .submit{
    display: flex;
    line-height: 40px;
    width: 100%;
    position: fixed;
    bottom: 55px;
    background-color: #ffffff;
  }
  .submit .settlement{
    width: 100px;
    height: 30px;
    margin-top: 5px;
    /* position: absolute; */
    /* right: 10px; */
    left: 45%;
  }
  .submit .all{
    margin-left: 12px;
  }
  .submit span:nth-child(2){
    /* background-color: aquamarine; */
    margin-left: 20%;
    font-size: 10px;
    position: absolute;
    left: 30px; 
    /* bottom: 0px; */
  }
  .submit .totle{
    color: red;
    font-size: 18px;
    margin-left: 0;
   
  }

  .NoData img{
    width: 50%;
    margin-top: 40%;
    margin-left: 25%;
  }
  .NoData .No1{
    color:black ;
    font-size:14px ;
    text-align: center;
    margin-top: 10px;
  }
  .NoData .No2{
    width: 50%;
    margin-left: 25%;
    line-height: 40px;
    background-color: rgb(27, 174, 174);
    border-radius: 25px;
    text-align: center;
    margin-top: 10px;
    color: white;
    font-size: 12px;
  }
    </style>    